<template>
  <div class="keyan">
    <div class="project-info-content">
      <header>
        <span>排序：<b class="active-blue m-r-10">浏览量降序</b> 浏览量升序</span>
        <span>
          <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
        </span>
      </header>
      <main>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="left-wrap m-t">
              <div class="left-content">
                <el-collapse v-model="activeNames">
                  <el-collapse-item class="item-content m-b-10" v-for="(item, index) in leftBanners" :key="index" :title="item.name" :name="index">
                    <LeftBannerItem :ref="`leftBannerItemRef${index}`" :itemBanner="item" :activeNames="activeNames" :leftForm="leftForm"
                      @changeLeft="changeLeft" />
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-col>
          <el-col :span="20">
            <ul>
              <li v-for="(item, index) in noticeList" :key="index">
                <div class="imgBox">
                  <div class="pic-img">
                    <img src="@/assets/img/yiqi3.jpeg" alt="" />
                  </div>
                  <div class="desc">
                    <el-icon>
                      <Management />
                    </el-icon>
                    <span class="instru-sort" title="海洋仪器">
                      海洋仪器
                    </span>
                  </div>
                </div>
                <div class="bottom">
                  <p class="title">{{ item.title }}</p>
                  <p class="brand">
                    <span class="name">品牌：</span>
                    <span class="txt">北京尚水信息技术股份有限公司</span>
                  </p>
                  <p class="type">
                    <span class="name">型号：</span>
                    <span class="txt">定制</span>
                  </p>
                  <p class="belong-unit">
                    <span class="txt">河流海岸研究所</span>
                  </p>
                  <p class="icons ">
                    <span class="flex">
                      <i class="el-icon-location"></i>
                      <span
                        style="font-size:16px;vertical-align:top;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        南京市</span>
                    </span>
                    <span class="pull-right flex">
                      <!-- <span class="m-r-10">
                      <i class="el-icon-star-off"></i>
                    </span> -->
                      <i class="el-icon-view m-r-10"></i>
                      63
                    </span>
                  </p>
                  <p class="buttons m-t">
                    <el-button type="primary" plain size="small">收藏</el-button>
                    <!-- <el-button type="primary" plain size="small">取消收藏</el-button> -->
                    <!-- <el-button type="primary" plain size="small">预约</el-button>
                  <el-button type="primary" plain size="small">咨询</el-button> -->
                  </p>
                </div>
              </li>
            </ul>
            <el-pagination class="m-t" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total" />
          </el-col>
        </el-row>
      </main>
    </div>
  </div>
</template>

<script >
import LeftBannerItem from './common/leftBannerItem.vue'
export default {
  components: {
    LeftBannerItem
  },
  data() {
    return {
      queryParams: {
        total: 18,
        currentPage: 1,
        pageSize: 9
      },
      activeNames: [0, 2],
      leftForm: {
        yiqi: ['海洋仪器']
      },
      leftBanners: [
        {
          fieldName: 'yiqi',
          name: '仪器分类',
          childName: JSON.parse(localStorage.getItem('dictLists'))
            .instrumentNum
        },
        {
          fieldName: 'xueke',
          name: '学科领域',
          childName: JSON.parse(localStorage.getItem('dictLists')).subjectArea
        },
        {
          fieldName: 'unit',
          name: '所属地区',
          childName: [
            '北京',
            '广东',
            '江苏',
            '上海',
            '浙江',
            '山东',
            '河南',
            '湖北',
            '四川'
          ]
        }
      ],

      noticeList: [
        {
          title: '[径潮模型水下微地形测量系统]',
          img: 'yiqi1',
          time: '2023-4-19'
        },
        {
          title: '[三维激光流速仪]',
          img: 'yiqi2',
          time: '2023-4-18'
        },
        {
          title: '[多波束测深仪]',
          img: 'yiqi3',
          time: '2023-3-21'
        },
        {
          title: '[水声探测仪]',
          img: 'yiqi3',
          time: '2023-3-01'
        },
        {
          title: '[双频识别声呐]',
          time: '2023-2-24'
        },
        {
          title: '[临底泥沙输移测量系统（平台）]',
          time: '2023-2-19'
        },
        {
          title: '[深水航道试验厅测控设备]',
          time: '2023-1-08'
        },
        {
          title: '[条带测深声呐]',
          time: '2023-1-08'
        }
      ],
      queryString: {
        name: '',
        name2: ''
      },
      searchForm: {
        changeMethod: () => {
        },
        formData: [
          {
            type: 'Input',
            label: '仪器名称：',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入仪器名称'
          },
          {
            type: 'Input',
            label: '管理单位：',
            prop: 'name2',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入管理单位'
          },
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
          }
        }
      ]
    }
  },
  methods: {
    getPlanList() {
      // 
    }
  },
}

</script>

<style lang="less" scoped>
  .keyan {
    background: url('~@/assets/img/待办.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
  }
  .project-info-content {
    width: 63%;
    margin: 0 auto;
    // height: 600px;
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dadcde;
      padding-bottom: 10px;
      color: #333;
      .active-blue {
        color: #358aff;
      }
      :deep(.input-box) {
        font-size: 16px !important;
        border: 1px solid #dbddde;
        .el-input {
          width: 100% !important;
        }
        border-radius: 4px;
        .el-input__wrapper,
        .el-input__inner {
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
          background: transparent !important;
        }
        .el-input-group__prepend,
        .el-input__wrapper,
        .el-input-group__append {
          background: transparent;
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
      }
    }
    main {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        // justify-content: space-between;
        li {
          width: 32%;
          position: relative;
          border-radius: 5px;
          background: #fff;
          box-shadow: 0px 0px 8px 2px #e4e8eb;
          margin-top: 20px;
          margin-right: 15px;
          overflow: hidden;
          &:nth-child(3n + 3) {
            margin-right: 0;
          }
          // border-bottom: 1px dashed #c5c6c8;
          // display: flex;
          // // justify-content: space-between;
          // align-items: center;
          .imgBox {
            position: relative;
            width: 100%;
            height: 180px;
            padding: 20px;
            .pic-img {
              width: 100%;
              height: 100%;
              overflow: hidden;
              object-fit: cover;
            }

            img {
              cursor: pointer;
              display: inline-block;
              width: 100%;
              height: 100%;
              transition: transform 1s;
              -moz-transition: -moz-transform 1s;
              -webkit-transition: -webkit-transform 1s;
              -o-transition: -o-transform 1s;
              &:hover {
                transform: scale(1.2, 1.2);
                -ms-transform: scale(1.2, 1.2);
                -moz-transform: scale(1.2, 1.2);
                -webkit-transform: scale(1.2, 1.2);
                -o-transform: scale(1.2, 1.2);
              }
            }
            .desc {
              box-sizing: border-box;
              padding: 0 20px 0 10px;
              height: 44px;
              line-height: 44px;
              background: #f3ce468a;
              position: absolute;
              right: 0;
              top: 50%;
              color: #fff;
              border-radius: 10px 0 0 10px;
              text-align: left;
              font-size: 14px;
              min-width: 110px;
            }
          }

          .bottom {
            padding: 0 20px 20px;
            .title {
              cursor: pointer;
              font-size: 20px;
              font-weight: bold;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .brand {
              margin-top: 10px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .type,
            .belong-unit {
              margin-top: 8px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .icons {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 8px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
            }
            .flex {
              display: flex;
              align-items: center;
            }
            .el-icon {
              color: #6a7a8e;
            }
          }
        }
      }
    }
  }
  .m-l-10 {
    margin-left: 10px;
  }
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0 !important;
  }
</style>
